<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security"
      th:replace="~{layout/base :: html}">
<head>
    <title th:text="${user.username + ' 的主页 - 诗词平台'}">用户主页</title>
</head>
<body>
<div th:fragment="content">
    <div class="row">
        <!-- 用户信息卡片 -->
        <div class="col-md-4">
            <div class="card">
                <div class="card-body text-center">
                    <img th:src="${user.avatarUrl}" class="rounded-circle mb-3"
                         style="width: 120px; height: 120px;">
                    <h4 class="card-title" th:text="${user.username}">用户名</h4>
                    <p class="text-muted" th:text="${user.bio ?: '这个人很懒，什么都没写...'}">个人简介</p>
                    <div class="d-flex justify-content-around mb-3">
                        <div>
                            <div class="h5" th:text="${user.poemCount}">0</div>
                            <div class="text-muted">作品</div>
                        </div>
                        <div>
                            <div class="h5" th:text="${user.followerCount}">0</div>
                            <div class="text-muted">粉丝</div>
                        </div>
                        <div>
                            <div class="h5" th:text="${user.followingCount}">0</div>
                            <div class="text-muted">关注</div>
                        </div>
                    </div>
                    <div sec:authorize="isAuthenticated()"
                         th:if="${user.id != #authentication.principal.id}">
                        <button class="btn btn-primary"
                                th:classappend="${user.followed ? 'active' : ''}"
                                th:onclick="'followUser(' + ${user.id} + ')'">
                            <i class="bi bi-person-plus-fill"></i>
                            <span th:text="${user.followed ? '已关注' : '关注'}">关注</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 作品列表 -->
        <div class="col-md-8">
            <ul class="nav nav-tabs mb-3">
                <li class="nav-item">
                    <a class="nav-link active" href="#poems" data-bs-toggle="tab">作品</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#likes" data-bs-toggle="tab">喜欢</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#bookmarks" data-bs-toggle="tab">收藏</a>
                </li>
            </ul>

            <div class="tab-content">
                <!-- 作品列表 -->
                <div class="tab-pane fade show active" id="poems">
                    <div class="list-group">
                        <a th:each="poem : ${poems}"
                           th:href="@{/poems/{id}(id=${poem.id})}"
                           class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h5 class="mb-1" th:text="${poem.title}">诗词标题</h5>
                                <small th:text="${#temporals.format(poem.createdAt, 'yyyy-MM-dd')}">
                                    发布时间
                                </small>
                            </div>
                            <p class="mb-1" th:text="${poem.content}">诗词内容</p>
                            <small class="text-muted">
                                <span th:text="${poem.viewCount + ' 阅读'}">阅读数</span>
                                <span class="mx-2">|</span>
                                <span th:text="${poem.likeCount + ' 赞'}">点赞数</span>
                                <span class="mx-2">|</span>
                                <span th:text="${poem.commentCount + ' 评论'}">评论数</span>
                            </small>
                        </a>
                    </div>
                </div>

                <!-- 喜欢的诗词 -->
                <div class="tab-pane fade" id="likes">
                    <div class="list-group">
                        <a th:each="poem : ${likedPoems}"
                           th:href="@{/poems/{id}(id=${poem.id})}"
                           class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h5 class="mb-1" th:text="${poem.title}">诗词标题</h5>
                                <small th:text="${poem.author.username}">作者</small>
                            </div>
                            <p class="mb-1" th:text="${poem.content}">诗词内容</p>
                        </a>
                    </div>
                </div>

                <!-- 收藏的诗词 -->
                <div class="tab-pane fade" id="bookmarks">
                    <div class="list-group">
                        <a th:each="poem : ${bookmarkedPoems}"
                           th:href="@{/poems/{id}(id=${poem.id})}"
                           class="list-group-item list-group-item-action">
                            <div class="d-flex w-100 justify-content-between">
                                <h5 class="mb-1" th:text="${poem.title}">诗词标题</h5>
                                <small th:text="${poem.author.username}">作者</small>
                            </div>
                            <p class="mb-1" th:text="${poem.content}">诗词内容</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:inline="javascript">
    function followUser(userId) {
        fetch(`/api/users/${userId}/follow`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (response.ok) {
                    location.reload();
                }
            });
    }
</script>
</body>
</html> 